@import 'settings.colors';
@import 'settings.global';
@import 'tools.functions';

.query-builder {
  $height: $button-height;
  $gutter: $view-controller-gutter;

  position: relative;
  z-index: 100;

  .ant-select,
  .ant-input {
    width: 200px;
  }

  .ant-btn,
  .bui-link-btn {
    height: $height;
  }
  .ant-btn-ghost{
    background: $color-white;
  }

  & .queryForm{
    display:block;
    max-width: 5000px;
    width: 100%;
  }
  & .query-item,& .ant-form-inline .query-item{
    display: inline-block;
    width:auto;
    margin:16px 0px 0px 16px;
  }
  & .query-item button{
    margin:2px 4px;
  }
  & .query-item-btn>button{
    margin-left: 8px;
    margin-top: 18px;
  }

  &-base {
    padding: 0px;
    .expand-trigger > .anticon {
      transform: rotate(0);
      transition: transform .5s ;
    }
  }

  &-expand {
    position: absolute;
    z-index: -1;
    top:-0px;
    right: -0px;
    left: -0px;
    padding-bottom:$gutter;
    border-bottom: 1px solid $color-border-default;
    background-color: $color-white;
    transition: all .5s;
  }

  &.base {
    .query-builder-expand {
      visibility: hidden;
      opacity: 0;
    }
  }

  &.expand {
    .query-builder-base{
      background: #f9f9f9;
    }
    .query-builder-expand {
      visibility: visible;
      opacity: 1;
      background: #f9f9f9;
    }

    .expand-trigger > .anticon {
      transform: rotate(180deg);
    }
  }
}
